import React from 'react'
import Layout from '../core/Layout'
import { Row, Col, Typography , Menu, Descriptions } from 'antd';
import { ShoppingCartOutlined, OrderedListOutlined, PlusCircleOutlined } from '@ant-design/icons'
import {isAuth} from '../../helper/auth'
import { Link } from 'react-router-dom'

function AdminDashboard() {
	const { Title } = Typography;
	const auth = isAuth()
	return (
		<>
			<Layout title="管理员 Dashboard">
				<Row>
					{/* 左侧布局: 管理员链接 */}
      		<Col span={4}>
						<Title level={5}>管理员链接</Title>
						<Menu mode="inline">
							<Menu.Item key="addCategory">
								<ShoppingCartOutlined />
								<Link to="/create/category">添加分类</Link>
        			</Menu.Item>
							<Menu.Item key="addProducts">
								<PlusCircleOutlined />
								<Link to="/create/product">添加商品</Link>
        			</Menu.Item>
							<Menu.Item key="orderList">
								<OrderedListOutlined />
								<Link to="/order/list">订单列表</Link>
        			</Menu.Item>
						</Menu>
					</Col>
					{/* 右侧布局: 管理员信息 */}
      		<Col span={20}>
						<Title level={5}>管理员信息</Title>
						<Descriptions bordered>
							<Descriptions.Item label="昵称">{auth.user.name}</Descriptions.Item>
    					<Descriptions.Item label="邮箱">{auth.user.email}</Descriptions.Item>
    					<Descriptions.Item label="角色">{auth.user.role === 1 ? '管理员' : '用户'}</Descriptions.Item>
						</Descriptions>
					</Col>
    		</Row>
			</Layout>
		</>
	)
}

export default AdminDashboard
